<template>
  <view class="page">
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <!-- 顶部自定义导航条 app h5 -->
      <view class="cu-bar fixed bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <!-- <view class="margin-left" v-if="isEditor" @tap="handleClean">一键清理下架商品</view> -->
        <view class="action"></view>
        <view class="content cart-title-text text-bold" :style="[{ top: StatusBar + 'px' }]">
          {{ i18n['购物车'] }}
          <text style="display: none;">{{ allNumber }}</text>
        </view>
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="margin-right cart-title-setup" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
        <!-- #endif -->
      </view>
      <!-- 顶部自定义导航条 end-->
    </view>
    <!-- 未登录状态  显示空购物车 按钮为去登录 -->
    <template v-if="!isLogin">
      <view class="cart-empty">
        <image class="empty-img" :src="imgBaseUrl + 'empty/cart.png'"  mode="widthFix"></image>
        <view class="empty-text">{{ i18n['您的购物车还没有商品，快去挑选吧'] }}</view>
        <view class="empty-btn" @tap="navToLogin">{{ i18n['去登录'] }}</view>
      </view>
    </template>
    <!-- 未登录状态 end-->
    <!-- 已登录状态 显示空购物车 按钮为去挑选好货 isLogin已经登录 但是 cartList购物车列表无值展示 -->
    <template v-if="isLogin && cartList.length == 0">
      <view class="cart-empty">
        <image class="empty-img" :src="imgBaseUrl + 'empty/cart.png'" mode="widthFix"></image>
        <view class="empty-text">{{ i18n['您的购物车还没有商品，快去挑选吧'] }}</view>
        <view class="empty-btn" @tap="navToHome">{{ i18n['去挑选好货'] }}</view>
      </view>
    </template>
    <!-- 已登录状态 显示空购物车 end-->
    <!-- 购物车商品列表模块 已登录状态 并且购物车列表有值 -->
    <template v-if="isLogin && cartList.length != 0">
      <!-- 微信小程序时 编辑按钮 -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="tool-box text-right padding-sm" :style="{ top: CustomBar + 'px' }">
        <view class="cu-btn text-sm cart-title-text" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
      </view>
      <!-- #endif -->
      <!-- 购物车列表 -->
      <view class="cart-box">
        <!-- 当商品不能购买(item.stock == 0 || item.is_sale == 0)时 选中按钮失效 并且添加滤镜效果 -->
        <block v-for="(dataItem, i) in cartList" :key="i">
          <view class="cart-box-item">
            <!-- 店铺信息 -->
            <view class="flex align-center merchant-info " v-if="dataItem.shop_info">
              <view class="check-box-1" @tap="check(dataItem, i)">
                <!-- checkbox部分 -->
                <checkbox v-if="isEditor" class="round theme" :class="dataItem.delChecked ? 'checked' : ''" :checked="dataItem.delChecked ? true : false"></checkbox>
                <checkbox v-if="!isEditor" class="round theme" :class="dataItem.checked ? 'checked' : ''" :checked="dataItem.checked ? true : false"></checkbox>
              </view>
              <view class=" text-df text-666 flex algin-center" style="align-items: center;" @click="goMerchant(dataItem.shop_info)">
                <image class="merchant-icon" :src="imgBaseUrl + 'tab/merchant.png'"  mode="aspectFill" />
                <text>{{ dataItem.shop_info.store_name }}</text>
                <text class="fu-iconfont icon">&#xe80e;</text>
              </view>
            </view>
            <!-- 判断没有绑定商品的商品放在一起 -->
            <block v-for="(item, index) in dataItem.cart_list" :key="index">
              <view class="cart-item" :class="{ 'not-but-class': item.stock == 0 || item.is_sale == 0 ||  item.is_check == 0}">
                <view class="check-box" @tap="icheck(item, i, index)">
                  <!-- checkbox部分 -->
                  <checkbox v-if="isEditor" class="round theme" :class="item.delChecked ? 'checked' : ''" :checked="item.delChecked ? true : false"></checkbox>
                  <checkbox
                    v-if="!isEditor"
                    class="round theme"
                    :class="item.checked ? 'checked' : ''"
                    :checked="item.checked ? true : false"
                    :disabled="item.stock == 0 || item.is_sale == 0 || item.is_check == 0"
                  ></checkbox>
                </view>
                <!-- 商品图片 -->
                <view class="img-box">
                  <view class="no-stok" v-if="item.is_check == 0"><image class="no-stock-img":src="imgBaseUrl + 'tab/shelf.png'" mode=""></image></view>
                  <view class="no-stok" v-if="item.stock == 0"><image class="no-stock-img" :src="imgBaseUrl + 'tab/sellOut.png'" mode=""></image></view>
                  <view class="no-stok" v-if="item.is_sale == 0"><image class="no-stock-img" :src="imgBaseUrl + 'tab/shelf.png'" mode=""></image></view>
                  <view class="img" @tap="toDetail(item, 1)"><fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image></view>
                </view>
                <!-- 商品详细信息 -->
                <view class="info-box">
                  <view class="info-top">
                    <view class="title" @tap="toDetail(item, 1)">{{ item.goods_name }}</view>

                    <!-- <view class="sku">{{ item.sku_name }}</view> -->
                    <!-- <view class="jiang-jia" v-if="item.shop_reduce_price&&item.shop_reduce_price>0">
                    <view class="jiang-jia-tip">降价</view>
                    <view class="jiang-jia-text">比加入时降￥{{ item.shop_reduce_price }}</view>
                  </view> -->
                    <view class="text-sm text-999 sku_name" v-if="item.sku_name" @tap="openPopup(item)">
                      <view class="overFlow_text">
                        <text>{{ item.sku_name }}</text>
                      </view>
                      <view style="flex-shrink: 0">
                        <text style="margin-right: 16rpx;">{{ i18n['选规格'] }}</text>
                        <text class="cuIcon-unfold lg text-gray"></text>
                      </view>
                    </view>
                  </view>
                  <view class="price-box">
                    <view class="price text-bold">
						<text style="font-size: 24rpx;">
							会员价
						</text>
                      <text class="small">￥</text>
                      {{ item | filterGoodsPrice }}
                    </view>
                    <view class="number" @tap.stop="">
                      <cart-number-box :min="1" :max="item.stock" :value="item.num" @change="numberChange($event, i, index)"></cart-number-box>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </block>
      </view>
      <!-- 购物车列表 end-->
      <!-- 购物车底部操作栏部分 -->
      <view class="cart-footer">
        <view class="footer-left">
          <view class="check-box" @tap="checkAll">
            <checkbox v-if="isEditor" class="round theme" :class="delAllChecked ? 'checked' : ''" :checked="delAllChecked ? true : false"></checkbox>
            <checkbox v-if="!isEditor" class="round theme" :class="allChecked ? 'checked' : ''" :checked="allChecked ? true : false"></checkbox>
          </view>
          <view class="text-box">
            <text class="text1 margin-left-xs">{{ i18n['全选'] }}</text>
            <!-- <text class="text2" v-if="!isEditor">(已选{{ totalNumber }}件)</text>
            <text class="text2" v-if="isEditor">(已选{{ totalNumberDel }}件)</text> -->
          </view>
        </view>
        <!-- 右边 正常状态 未点击管理时isEditor=false -->
        <view class="footer-right" v-if="!isEditor">
          <view class="all-text">
            <view class="text1">{{ i18n['合计'] }}：</view>
            <view class="text-price-box">
              <text class="small">￥</text>
              {{ totalPrice }}
            </view>
          </view>
          <view class="jiesuan-btn" @click="createOrder" >结算 ({{ totalNumber }})</view>
        </view>
        <!-- 右边 编辑状态 已经点击管理时 isEditor=true-->
        <view class="footer-right" v-if="isEditor">
          <view class="footer-btn" @tap="collect">{{ i18n['移入收藏'] }}</view>
          <view class="footer-btn delect" @tap="del">{{ i18n['删除'] }}</view>
        </view>
      </view>
      <!-- 购物车底部操作栏部分 end-->
    </template>
    <!-- 猜你喜欢商品 未点击展示时显示isEditor=false -->
    <template v-if="!isEditor">
      <fu-waterflow ref="guess" titleNone="热销商品" type="cart"></fu-waterflow>
    </template>
    <!-- 猜你喜欢商品 end-->
    <fu-notwork></fu-notwork>
    <!-- 规格弹窗 -->
    <fu-specs-popup
      ref="specs"
      :speclist="spec_list"
      :skulist="sku_list"
      :currentId="sku_id"
      :info="goodsInfo"
      :isCart="isCart"
      @confirmChange="confirmChange"
      @changeSpec="setSpec"
    ></fu-specs-popup>
  </view>
</template>

<script>
import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
import cartNumberBox from '../../components/cart-number-box/cart-number-box';
export default {
  components: {
    cartNumberBox,
    fuSpecsPopup
  },
  data() {
    return {
      // 选择规格
      select_id: '',
      goodsInfo: {}, // 商品信息
      spec_list: [], // 规格列表
      sku_list: [], // 规格参照列表
      sku_id: 0, // 当前规格id
      isCart: true,
      getChangeValue: {},
      isShowLoading: true,
      isEditor: false, // 管理 or 完成
      isLogin: global.token ? true : false, //当前的登录状态
      cartList: [], // 购物车列表
      checkedCache: [], // 上一次缓存的选中状态
	  
	  userInfo:{}
    };
  },
  computed: {
    // 选择的商品总价
    totalPrice() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.checked == true) {
            // 价格区分会员用户
            let _price = this.filterGoodsPrice(j);
            total += Number(_price) * Number(j.num);
          }
        });
      });
      return Number(total.toFixed(2));
    },
    // 正常状态选择的商品数量
    totalNumber() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.checked == true) {
            total += Number(j.num);
          }
        });
      });
      return total;
    },
    // 删除时选择的商品数量
    totalNumberDel() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.delChecked == true) {
            total += Number(j.num);
          }
        });
      });
      return total;
    },
    // 购物车内的商品数量
    allNumber() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        total += Number(item.num);
      });
      return total;
    },
    // 管理模式全选状态
    delAllChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        if (item.delChecked == false) {
          if (item.stock == 0) return;
          if (item.is_valid == 1) return;
          bool = false;
        }
      });
      return bool;
    },
    // 正常模式全选状态
    allChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        // if(item.stock == 0) return ;
        // if(item.is_valid == 1) return ;
        if (item.checked == false) {
          bool = false;
        }
      });
      return bool;
    }
  },
  onPullDownRefresh() {
    this.getCartData(true);
    this.$refs.guess && this.$refs.guess.refresh();
  },
  onReachBottom(e) {
    this.$refs.guess && this.$refs.guess.loadData();
  },
  onShow() {
    if (global.token) {
      this.getCartData();
	  this.getInfo();
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    this.isEditor = false;
    this.$refs.guess && this.$refs.guess.refresh();
    this.$store.dispatch('getCartList');
	uni.pageScrollTo({
	  scrollTop: 0,
	  duration: 0,
	});
  },
  onLoad() {
    uni.$on('updateCart', () => {
      this.getCartData();
    });
    uni.$on('delCartGoods', data => {
      // 删除已买商品
      this.delCartGoods(data);
    });
  },
  onUnload() {
    uni.$off('updateCart');
    uni.$off('delCartGoods');
	
  },
  methods: {
	  getInfo() {
	  	this.$api.post(global.apiUrls.postGetUserInfo).then(res => {
	  		if (res.data.code == 1) {
	  			
	  			this.userInfo = res.data.data
	  		}
	  	}).catch(err => {})
	  },
    //确定改变规格
    confirmChange() {
      this.$api
        .post(global.apiUrls.changeSetGuiGe, {
          cart_id: this.select_id,
          sku_id: this.getChangeValue.sku_id,
          shop_price: this.getChangeValue.shop_price,
          sku_name: this.getChangeValue.key_name
        })
        .then(res => {
          this.getCartData();
        })
        .catch(err => {
          console.log('ERROR',err)
        });
    },
    // 获取商品详情
    openPopup(item) {
      if (item.is_valid == 1) {
        return;
      }
      console.log(item, 999);
      this.select_id = item.id;
      this.sku_id = item.sku_id;
      console.log('sku_id', this.sku_id);
      this.$api
        .get(global.apiUrls.getGoodsDetail, {
          goods_id: item.goods_id,
          user_id: (global.userInfo && global.userInfo.id) || 0
        })
        .then(res => {
          if (res.data.code == 1) {
            console.log('goods detail', res.data.data);
            let data = res.data.data;
            this.swipers = data.images;
            this.goodsInfo = {
              name: data.name,
              price: data.shop_price,
              market_price: data.market_price,
              discounts: data.discounts || 0.0,
              thumb: data.thumb,
              description: data.description,
              is_collect: data.is_collect,
              share_award_money: data.share_award_money || 0.0,
              number: 1,
              stock: data.stock || 0,
              totalStock: data.stock || 0,
              sales_sum: data.sales_sum,
              is_spec: data.is_spec,
			  run_type: data.run_type
            };
            // this.totalStock = data.stock;
            // this.body = richText.format(data.body.trim());
            // this.comment = data.comment || [];
            // this.comment_total = data.comment_total || 0;
            if (data.is_spec == 1) {
              this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
              this.sku_list = Object.values(data.sku_list)
                .map(item => {
                  item.sku_spec = item.key.split('_');
                  return item;
                })
                .filter(item => {
                  return item.stock > 0;
                });
            }
            this.$nextTick(() => {
              if (data.is_spec == 1) {
                this.$refs.specs.init();
              }
            });
          } else {
            this.$refs['specs'].close();
            setTimeout(() => {
              this.$message.info(this.i18n['获取商品规格失败']);
            }, 300);
          }
          const that = this;
          setTimeout(function() {
            that.$refs['specs'].init();
          }, 1);
          setTimeout(function() {
            that.$refs['specs'].open();
          }, 10);
        });
    },
    // 修改购买规格
    setSpec(skuInfo) {
      this.getChangeValue = skuInfo;
    },
    // 判断是否为会员价，活动价和商品价
    filterGoodsPrice(value) {
      if (!value) return '';
      let isMember = this.$store.getters.isMember; // 是否是会员
      let isActivity = value.activity_type == undefined || value.activity_type == 0 ? false : true; // 是否是活动
      let member_activity_price = value.member_activity_price ? value.member_activity_price : value.activity_price; //会员活动价
      let activity_price = value.activity_price; // 活动价
      let member_price = value.member_price ? value.member_price : value.shop_price; // 会员价
      let shop_price = value.shop_price; // 售卖价
      if (isActivity && isMember) {
        // console.log("会员活动价",member_activity_price);
        return member_activity_price;
      } else if (isActivity && !isMember) {
        // console.log("活动价",activity_price);
        return activity_price;
      } else if (!isActivity && isMember) {
        // console.log("会员价",member_price);
        return member_price;
      } else if (!isActivity && !isMember) {
        // console.log("普通价",shop_price);
        return shop_price;
      }
      return '';
    },
    // 去店铺
    goMerchant(item) {
      this.$urouter.navigateTo({
        url: '/pages/goods/shop/shop/index',
        params: {
          partner_id: item.u_id
        }
      });
    },
    //分页请求参数
    pagingListPostData() {
      return {
        businessSign: 'cart'
      };
    },
    //钩子函数提前处理数据
    pagingListBeforeResponseData(res) {
      console.log('res==================');
      // console.log(res);
      res.data.data.list = res.data.data.goods_list;
      return res.data.data;
    },
    // 获取购物车数据
    getCartData(value) {
      if (!value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.getCartList)
        .then(res => {
          this.isShowLoading = false;
          if (res.data.code == 1) {
            let data = res.data.data;
            if (data.length == 0) {
              this.isEditor = false;
            }
            uni.stopPullDownRefresh();
            this.initCheckedType(data);
          }
        })
        .catch(err => {
          this.isShowLoading = false;
        });
    },
    // 初始化购物车商品选中状态
    initCheckedType(list) {
      this.getCartChecked();
      list.forEach(item => {
        item.delChecked = false;
        let bool = true;
        item.cart_list.forEach(ele => {
          ele.delChecked = false;
          if(this.isChecked(ele.id)){
            ele.checked = true;
          }else{
            ele.checked = false;
            bool = false;
          }
        });
        item.checked = bool;
      });
      this.cartList = list;
      this.$forceUpdate();
    },
    // 判断是否是选中状态
    isChecked(id) {
      return this.checkedCache.includes(id);
    },
    // 缓存购物车选中状态 记录ids
    cacheCartChecked() {
      let arr = [];
      this.cartList.forEach(item => {
        item.cart_list.forEach(ele => {
          if(ele.checked){
            arr.push(ele.id);
          }
        })
      });
      uni.setStorageSync('cart_checked_cache', arr);
    },
    // 获取购物车选中状态
    getCartChecked() {
      let cache = uni.getStorageSync('cart_checked_cache');
      this.checkedCache = cache || [];
    },
    // 点击导航管理按钮
    changeEditType() {
      // 判断是否登录 如果未登录 并且无商品 返回
      if (!this.isLogin || this.cartList.length < 1) {
        return;
      }
      // let _text = '';
      this.isEditor = !this.isEditor;
      console.log(this.isEditor);
      if (!this.isEditor) {
		  this.getCartData();
        // _text = '管理';
      } else {
        // console.log('管理状态');
        // _text = '完成';
        //如果此时切换状态为编辑 则选中所有商品 （同时添加delChecked属性）
        this.cartList.forEach(item => {
          item.delChecked = true;
          // 全选
          item.cart_list.forEach(j => {
            // if(j.is_sale == 0 || j.stock == 0){
            //   j.delChecked = false
            // }else{
            //     j.delChecked = true
            // }
            j.delChecked = true;
			j.stock = 1;
          });
        });
      }
    },
    // 删除购物车
    delFromCart(ids) {
      this.$util.showModal({
        title: '提示',
        content: '确认删除吗?',
        success: res => {
          if (res.confirm) {
            this.delCartGoods(ids);
          }
        }
      });
    },
    //调用删除购物车方法 并更新购物车列表
    delCartGoods(ids) {
      this.$api
        .post(global.apiUrls.delCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    // 店铺选中状态处理
    check(item, i) {
      if (this.isEditor) {
        this.cartList[i].delChecked = !this.cartList[i].delChecked;
        this.cartList[i].cart_list.forEach(j => {
          if (j.is_sale == 0 || j.stock == 0 || j.is_check == 0) {
            j.delChecked = false;
          } else {
            j.delChecked = this.cartList[i].delChecked;
          }
        });
      } else {
        this.cartList[i].checked = !this.cartList[i].checked;
        this.cartList[i].cart_list.forEach(j => {
          if (j.is_sale == 0 || j.stock == 0 || j.is_check == 0) {
            j.checked = false;
          } else {
            j.checked = this.cartList[i].checked;
          }
          this.cacheCartChecked();
        });
      }
    },
    // 监听是否店铺全选商品
    allcheckGood(item, i) {
      console.log(item);
      if (this.isEditor) {
        // 店铺内商品全选
        if (item.cart_list.findIndex(target => target.delChecked == false) == -1) {
          this.cartList[i].delChecked = true;
        } else {
          // 店铺内商品全不选
          this.cartList[i].delChecked = false;
        }
      } else {
        // 店铺内商品全选
        if (item.cart_list.findIndex(target => target.checked == false) == -1) {
          this.cartList[i].checked = true;
        } else {
          // 店铺内商品全不选
          this.cartList[i].checked = false;
        }
      }
    },
    // 商品选中处理状态
    icheck(item, i, index) {
      if (item.is_check == 0) return this.$message.info(this.i18n['该商品已下架']);
      if (item.stock == 0) return this.$message.info(this.i18n['该商品已售完,正在采购中']);
      if (item.is_sale == 0) return this.$message.info(this.i18n['该商品已下架']);
      if (this.isEditor) {
        this.cartList[i].cart_list[index].delChecked = !this.cartList[i].cart_list[index].delChecked;
      } else {
        this.cartList[i].cart_list[index].checked = !this.cartList[i].cart_list[index].checked;
      }
      this.allcheckGood(this.cartList[i], i);
      this.cacheCartChecked();
      this.$forceUpdate();
    },
    //
    checkfor() {
      //选中状态，页面关闭的时候全部为false
      let _type = false;
      this.cartList.forEach(item => {
        item.checked == false;
        item.delChecked == false;
      });
      this.allChecked = false;
      this.delAllChecked = false;
    },
    //全选|取消全选
    checkAll() {
      if (this.isEditor) {
        const bool = !this.delAllChecked;
        this.cartList.forEach(item => {
          item.delChecked = bool;
          // 商品全选
          item.cart_list.forEach(j => {
            j.delChecked = bool;
          });
        });
      } else {
        const bool = !this.allChecked;
        this.cartList.forEach(item => {
          item.checked = bool;
          // 商品全选
          item.cart_list.forEach(j => {
            if (j.is_sale == 0 || j.stock == 0) {
              j.checked = false;
            } else {
              j.checked = bool;
            }
          });
        });
        this.cacheCartChecked();
      }
    },
    /** @description 数量改变
     * @param {Object} e
     * @param {string} index
     */
    numberChange(e, i, index) {
      let item = this.cartList[i].cart_list[index];
      this.$api
        .post(global.apiUrls.postSetCartNumber, {
          cart_id: item.id,
          sku_id: item.sku_id,
          num: e
        })
        .then(res => {
          console.log('cart number', res.data);
          if (res.data.code == 1) {
            this.$set(this.cartList[i].cart_list[index], 'num', e);
            this.$store.dispatch('getCartList');
          }
        });
    },
    /** @description 点击移入收藏夹
     */
    collect() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.delChecked) {
            ids.push(j.id);
          }
        });
      });
      if (ids.length == 0) return this.$message.info(this.i18n['未选择商品']);
      ids = ids.join(',');
      this.$api
        .post(global.apiUrls.removeGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log(res);
          if (res.data.code == '1') {
            this.$message.success(res.data.msg);
            this.getCartData();
            this.$store.dispatch('getCartList');
          }
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    // 删除商品
    del() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.delChecked) {
            ids.push(j.id);
          }
        });
      });
      if (ids.length == 0) return this.$message.info(this.i18n['未选择商品']);
      this.delFromCart(ids.join(','));
    },
    // 创建订单
    createOrder() {
		
	if(this.userInfo.is_vip){
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        item.cart_list.forEach(j => {
          if (j.checked) {
            ids.push(j.id);
          }
        });
      });
      const cart_ids = ids.join(',');
      if (cart_ids == '') return this.$message.info(this.i18n['请选择商品']);
      this.$api
        .post(global.apiUrls.check_goods_num, {
          cart_ids: ids
        })
        .then(res => {
          console.log('检测商品库存', res.data);
          if (res.data.code == 1) {
            this.$urouter.navigateTo({
              url: '/pages/order/order-process/confirm-order/index',
              params: {
                type: 'cart',
                ids: cart_ids
              }
            });
          } else {
            this.$message.info(res.data.msg);
          }
        });
		}else{
			this.$message.info('请先购买会员再购买')
			setTimeout(()=>{
				uni.navigateTo({
					url:'/pages/member/vip/vip/index'
				})
			},800)
		}
    },
    //选择清理下架产品
    handleClean() {
      const list = this.cartList;
      let ids = [];
      let is_shelves = [];
      list.forEach(
        function(item) {
          if (item.cart_list.length > 0) {
            item.cart_list.forEach(cleanItem => {
              if (cleanItem.is_sale == 0) {
                is_shelves.push(cleanItem.id);
              }
            });
          }
        }
      );
      console.log(is_shelves, 88888);
      if (is_shelves.length == 0) return this.$message.info(this.i18n['购物车无下架商品']);

      this.cleanFromCart(is_shelves.join(','));
    },
    // 提示清理下架产品
    cleanFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认移除所选商品吗'] + '?',
        success: res => {
          if (res.confirm) {
            this.cleanCartGoods(ids);
          }
        }
      });
    },
    //清理下架
    cleanCartGoods(ids) {
      console.log(ids, 88888);
      this.$api
        .post(global.apiUrls.cleanUpGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    // 去商品详情 type 1 购物车点击 2 猜你喜欢点击
    toDetail(item, type) {
      if (item.is_sale == 0) return this.$message.info(this.i18n['该商品已下架']);
      let goods_id = type == 1 ? item.goods_id : item.id;
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          goods_id: goods_id,
          sku_id: item.sku_id || 0
        }
      });
    },
    // 去登录
    navToLogin() {
      this.$util.navigateToLogin();
    },
    // 去首页
    navToHome() {
      this.$urouter.switchTab('/pages/tab/home/shopindex/index');
    },
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

  .page-nologin {
    width: 100%;
    height: 600rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tips {
    line-height: 88rpx;
    background: rgba(240, 35, 37, 0.1);
    color: #f02325;
    font-size: 28rpx;
    color: #f02325;

    image {
      width: 44rpx;
      height: 50rpx;
      margin-right: 24rpx;
    }

    .cu-btn {
      width: 147rpx;
      height: 48rpx;
      color: #fff;
      background: linear-gradient(180deg, rgba(240, 35, 37, 1) 0%, rgba(255, 20, 80, 1) 100%);
      border-radius: 8rpx;
      padding: 0;
    }
  }

  .vip_tips {
    width: 100%;
    line-height: 72rpx;
    /* margin: 22rpx 0;
			background: rgba(255, 255, 255, 0.7); */
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;

    view {
      text {
        margin: 0 10rpx 0 0;
        color: #999;
      }
    }
  }

  .page-kong {
    width: 100%;
    // height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999999;
    font-size: 28rpx;

    .cu-btn {
      width: 200rpx;
      height: 72rpx;
      color: #ffffff;
      border-radius: 16rpx;
      background: linear-gradient(90deg, rgba(255, 69, 23, 1) 0%, rgba(240, 35, 37, 1) 100%);
    }
  }
}

.page-list {
  width: calc(100% -24rpx);
  border-radius: 16rpx;
  overflow: hidden;
}

.content-goods-list {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  margin-top: 24rpx;
}

.goods-info {
  width: 598rpx;
  padding: 20rpx 0;

  .goods-desc {
    flex: 1;
    min-width: 1px;
    min-height: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.round {
  transform: scale(0.7);
}

.cu-bar {
  position: fixed !important;
  left: 0;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 100upx !important;
  /* #endif */
  height: 98rpx;
  z-index: 99;

  .action {
    flex: 1;
  }

  .action-btn {
    width: 250rpx;
    height: 100%;
    background-color: $fu-main-color;
    color: #ffffff;
    font-size: 32rpx;
    line-height: 98rpx;
    text-align: center;
  }
}

.action-bar {
  position: fixed;
  // #ifdef H5
  bottom: 100rpx !important;
  // #endif
  // #ifndef H5
  bottom: 0 !important;
  // #endif
  width: 100%;
  z-index: 999;
}

.img-150 {
  width: 150rpx;
  min-width: 150rpx;
  height: 150rpx;
  min-height: 150rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.size-32 {
  font-size: 32rpx;
}

.size-28 {
  font-size: 28rpx;
}

.size-24 {
  font-size: 24rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.info {
  height: 30rpx;

  .info-title {
    width: 80rpx;
    line-height: 30rpx;
    text-align: center;
  }

  .info-number {
    width: 70rpx;
    line-height: 22rpx;
    text-align: center;
    border: 4rpx solid $fu-main-color;
    border-left: none;
  }
}

.wrap-image {
  position: relative;

  .box-kong {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6rpx;

    .box-kong-item {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 100rpx;
    }
  }
}

.block-262 {
  width: 326rpx;
  min-width: 326rpx;
  height: 333rpx;
  min-height: 333rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.tool-box {
  position: sticky;
  z-index: 999;
  background: #f8f8f8;

  .cu-btn {
    width: 144rpx;
    height: 56rpx;
    border-radius: 56rpx;
    border: 2rpx solid rgba(191, 191, 191, 1);
    background: #fff;
  }
}

.text-cut-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

// 2021-01-07 新版本样式修改 by:技术五部 wyh
.cart-empty {
  width: 750rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;

  .empty-img {
    display: block;
    margin-top: 64rpx;
    width: 440rpx;
    height: 220rpx;
  }

  .empty-text {
    margin-top: 28rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 33rpx;
    color: #999999;
    opacity: 1;
  }

  .empty-btn {
    margin-top: 27rpx;
    margin-bottom: 64rpx;
    width: 280rpx;
    // height: 64rpx;
    background: $bgtheme;
    opacity: 1;
    border-radius: 32rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 64rpx;
    color: #ffffff;
    opacity: 1;
  }
}

// 购物车 字体样式
.cart-title-text {
  font-size: 32rpx;
  font-family: PingFang SC;
  line-height: 50rpx;
  color: #000000;
  opacity: 1;
}

// 管理 完成 按钮字体修改
.cart-title-setup {
  font-size: 28rpx !important;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 45rpx;
  color: $theme;
}

// 购物车商品列表模块
.cart-box {
  width: 750rpx;
  // background-color: #fff;
  overflow: hidden;
  .cart-box-item {
    background: #ffffff;
    padding-top: 32rpx;
    margin-top: 20rpx;
    border-radius: 24rpx;
    // #ifdef MP-WEIXIN
    &:first-child {
      margin-top: 0;
    }
    // #endif
  }
  // padding-bottom: 24rpx;
  .cart-item {
    width: 718rpx;
    margin: 32rpx 0 0 32rpx;
    display: flex;
    padding-bottom: 32rpx;
    // border-bottom: 1px solid #eee;
    // align-items: center;

    //当不能购买时 调整灰度
    &.not-but-class {
      filter: grayscale(100%);
    }

    &:nth-last-of-type(1) {
      border-bottom: none;
    }

    // checkbox部分
    .check-box {
      margin-top: 72rpx;
      width: 37rpx;
      height: 37rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    // 商品图片
    .img-box {
      width: 180rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-left: 24rpx;
      overflow: hidden;
      border-radius: 16rpx;
      position: relative;

      .no-stok {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 148rpx;
        height: 148rpx;
        z-index: 2;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 74rpx;

        display: flex;
        align-items: center;
        justify-content: center;

        .no-stock-text {
          color: #fff;
        }

        .no-stock-img {
          display: block;
          width: 95rpx;
          height: 95rpx;
        }
      }

      .img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 180rpx;
        height: 180rpx;
      }
    }

    // 商品详细信息
    .info-box {
      width: 422rpx;
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .info-top {
        display: flex;
        flex-direction: column;

        .title {
          //两行溢出隐藏
          white-space: nowrap;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 2;

          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 40rpx;
          // height: 80rpx;
          color: #333333;
          opacity: 1;
        }

        .sku {
          //单行溢出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;

          margin-top: 16rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 42rpx;
          height: 42rpx;
          color: #999999;
          opacity: 1;
        }

        .jiang-jia {
          display: flex;
          align-items: center;
          margin-top: 25rpx;

          .jiang-jia-tip {
            background: linear-gradient(126deg, #fa2033 0%, #ff6530 100%);
            padding: 0 8rpx;
            border-radius: 8rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 32rpx;
            color: #ffffff;
            opacity: 1;
            margin-right: 8rpx;
          }

          .jiang-jia-text {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 42rpx;
            color:#FB2A25;
            opacity: 1;
          }
        }
      }

      .price-box {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 25rpx;

        .price {
          font-size: 32rpx;
          font-family: Oswald;
          font-weight: 500;
          line-height: 36rpx;
          color: #FA2033;
          opacity: 1;

          .small {
            font-size: 22rpx;
          }
        }

        .number {
        }
      }
    }
  }
}
.check-box-1 {
  width: 37rpx;
  height: 37rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
// 购物车底部操作栏部分
.cart-footer {
  height: 90rpx;
  width: 750rpx;
  left: 0;
  position: fixed;
  // #ifdef H5
  bottom: 100rpx !important;
  // #endif
  // #ifndef H5
  bottom: 0 !important;
  // #endif
  width: 100%;
  z-index: 999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .footer-left {
    display: flex;
    align-items: center;

    .check-box {
      margin-left: 32rpx;
      width: 37rpx;
      height: 37rpx;
      flex-shrink: 0;
      position: relative;
      transform: translateY(-23%);
    }

    .text-box {
      margin-left: 16rpx;

      .text1 {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #333333;
      }

      .text2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 33rpx;
        color: #999999;
      }
    }
  }

  .footer-right {
    // 右边 正常状态
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .all-text {
      display: flex;
      align-items: center;
      margin-right: 24rpx;

      .text1 {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 32rpx;
        color: #666666;
        opacity: 1;
      }

      .text-price-box {
        font-size: 32rpx;
        font-family: Oswald;
        font-weight: 500;
        line-height: 36rpx;
        color: #fa2033;

        .small {
          font-size: 22rpx;
        }
      }
    }

    .jiesuan-btn {
      width: 230rpx;
      // height: 56rpx;
      // border-radius: 28rpx;
	  height: 90rpx;
      background: $theme;
      opacity: 1;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height:90rpx;
      color: #ffffff;
    }

    // 右边 编辑状态
    .footer-btn {
      width: 200rpx;
      background: #F8F8F8;
      opacity: 1;
      border-radius: 36rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 72rpx;
      color: #333333;
      opacity: 1;
      margin-right: 24rpx;
      margin-left: -8rpx;
    }
    .delect{
      background-color: $bgtheme;
      color: #FFFFFF;
    }
  }
}

// 猜你喜欢商品
.love-goods {
  margin-top: 20rpx;
  width: 750rpx;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfdfd 0%, #f8f8f8 100%);

  // background: #F8F8F8;
  // 猜你喜欢标题
  .love-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 51rpx;

    .icon {
      display: block;
      width: 32rpx;
      height: 14rpx;
    }

    .text {
      margin: 0 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      opacity: 1;
    }
  }

  // 猜你喜欢 商品列表
  .goods-box {
    width: 702rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 32rpx;

    .good-item {
      width: 346rpx;
      height: 545rpx;
      background: #ffffff;
      opacity: 1;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 10rpx;

      .img-box {
        width: 346rpx;
        height: 346rpx;
        overflow: hidden;
        position: relative;

        .good-img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          width: 346rpx;
          height: 346rpx;
        }
      }

      .good-title {
        margin-top: 24rpx;
        width: 346rpx;
        height: 80rpx;
        padding: 0 16rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 40rpx;
        color: #333333;
        opacity: 1;
        //两行溢出隐藏
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .price-box {
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        .price-left {
          margin-left: 16rpx;
          font-size: 32rpx;
          font-family: Oswald;
          font-weight: 500;
          line-height: 36rpx;
          color: #fa2033;
          opacity: 1;

          .small {
            font-size: 22rpx;
          }
        }

        .price-right {
          margin-left: 14rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 33rpx;
          color: #bfbfbf;
          opacity: 1;
          text-decoration: line-through;
        }
      }
    }
  }
}

.merchant-info {
  margin: 0rpx 30rpx;

  .icon {
    margin-left: 6rpx;
    font-size: 24rpx;
  }
}

.merchant-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 11rpx;
  margin-right: 8rpx;
  top: 2rpx;
}
.sku_name {
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  margin: 8rpx 0;
  border-radius: 8rpx;
}
.overFlow_text {
  width: 250rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
